<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.set</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app" style="color: blueviolet;">
        {{count}}
        <br>
        <ol>
            <li v-for="items in goods">{{items}}</li>
        </ol>
        <button onclick="add()">change</button>
    </div>
    
    <!--由于js的原因，无法监听数组的下标的相关操作，比如根据在指定下标修改内容或修改数组长度；
        也就是无法触发js更新dom元素，Vue.set解决了这个问题-->

    <script>
        function add(){
            //Vue.set(outData,'count',4);
            //app.count++;
            //outData.count++;
            Vue.set(app.goods,1,'sell out');
        }
        var outData = {
            count:1,
            goods:['car','food','computer']
        }
        var app = new Vue({
            el:'#app',
            data:outData
        })

    </script>
</body>
</html>